<template>
  <div>
    <el-button type="primary" @click="loading=false">销毁组件</el-button>
    <Child v-if="loading" @hook:mounted="handleChildMounted" @hook:beforeDestroy="handlebeforDestryed" @hook:destroyed="handleDestroyed" :data="data" />
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  components: { Child },
  mixins: [],
  props: {},
  data() {
    return {
      loading: false,
      data: 'from parent by props',
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    console.log('---parent mounted----', 'parent mounted')
    this.loading = true
  },
  methods: {
    handleChildMounted() {
      console.log('---handleChildMounted---', 'reback function')
    },
    handlebeforDestryed() {
      console.log('---handlebeforDestryed rebackFunction')
    },
    handleDestroyed() {
      console.log('---handleDestroyed rebackFunction')
    },
  },
}
</script>
<style lang="scss" scoped>
</style>